<template>
    <div class="m_right">
        <p></p>
        <div class="mem_tit">资讯列表</div>
        <form class="horizontal-form">
            <div class="form-item">
                <label>资讯主题：</label>
                <input type="text" name="title" v-model="title" />
            </div>
            <div class="form-item">
                <label>年份：</label>
                <input type="text" name="createTime" v-model="createTime" />
            </div>
            <div class="form-item">
                <input type="button" value="查询" @click="getNewsList(1, 5)" />
                <input type="button" value="重置" @click="resetForm()" />
                <input type="button" value="新增" @click="addNewsDiv()" v-if="canEdit" />
            </div>
        </form>
        <table>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>资讯主题</th>
                    <th>发布时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(news, index) in newsList" :key="news.id">
                    <td style="color:#ff4e00;">{{ (pageInfo.pageNum - 1) * 5 + index + 1 }}</td>
                    <td>{{ news.title }}</td>
                    <td>{{ news.createTime }}</td>
                    <td>
                        <a href="javascript:;" @click="showNewsDiv(news.id)">查看</a>&nbsp;&nbsp;
                        <a href="javascript:;" @click="updateNewsDiv(news.id)" v-if="canEdit">修改</a>&nbsp;&nbsp;
                        <a href="javascript:;" @click="delNews(news.id)" v-if="canEdit">删除</a>
                    </td>
                </tr>
                <tr v-if="pageInfo.total === 0">
                    <td colspan="4" style="color:#ff4e00;">暂无数据哦!亲</td>
                </tr>
            </tbody>
        </table>
        <!-- 分页条 -->
        <div class="pagination" v-if="pageInfo.pages > 0">
            <button :disabled="pageInfo.pageNum === 1" @click="turn(pageInfo.pageNum - 1)">上一页</button>

            <span v-for="p in showPages" :key="p" :class="{ active: p === pageInfo.pageNum }" @click="turn(p)">{{ p
                }}</span>

            <button :disabled="pageInfo.pageNum === pageInfo.pages" @click="turn(pageInfo.pageNum + 1)">下一页</button>
        </div>
        <!-- 展示资讯 -->
        <div class="showNews" v-if="viewMode === 'show'">
            <p></p>
            <div class="mem_tit">资讯详情</div>
            <table>
                <tbody>
                    <tr>
                        <td style="width: 50%;">资讯主题:</td>
                        <td>{{ newsInfo.title }}</td>
                    </tr>
                    <tr>
                        <td style="width: 50%;">发布时间:</td>
                        <td>{{ newsInfo.createTime }}</td>
                    </tr>
                    <tr>
                        <td style="width: 50%;">资讯内容:</td>
                        <td>{{ newsInfo.content }}</td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input type="button" value="返回" @click="back()" />
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- 添加资讯 -->
        <div class="addNews" v-if="viewMode === 'add'">
            <p></p>
            <div class="mem_tit">资讯添加</div>
            <table>
                <tbody>
                    <tr>
                        <td style="width: 50%;">资讯主题:</td>
                        <td>
                            <input type="text" name="title" v-model="addNewsInfo.title" @blur="checkTitle()"
                                @focus="clearTitleError()" /><br />
                            <span v-if="!titleValid" class="error-tip">资讯主题不能为空</span>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 50%;">资讯内容:</td>
                        <td>
                            <textarea name="content" cols="55" rows="10" v-model="addNewsInfo.content"
                                @blur="checkContent()" @focus="clearContentError()"></textarea><br />
                            <span v-if="!contentValid" class="error-tip">资讯主题不能为空</span>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input type="button" value="提交" @click="addNews()" />&nbsp;&nbsp;
                            <input type="button" value="重置" @click="addResetNews()" />&nbsp;&nbsp;
                            <input type="button" value="返回" @click="back()" />
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- 修改资讯 -->
        <div class="updateNews" v-if="viewMode === 'update'">
            <p></p>
            <div class="mem_tit">资讯修改</div>
            <table>
                <tbody>
                    <input type="hidden" name="id" v-model="updateNewsInfo.id" />
                    <tr>
                        <td style="width: 50%;">资讯主题:</td>
                        <td>
                            <input type="text" name="title" v-model="updateNewsInfo.title" @blur="checkTitle()"
                                @focus="clearTitleError()" />
                            <br />
                            <span v-if="!titleValid" class="error-tip">资讯主题不能为空</span>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 50%;">资讯内容:</td>
                        <td>
                            <textarea name="content" cols="55" rows="10" v-model="updateNewsInfo.content"
                                @blur="checkContent()" @focus="clearContentError()"></textarea>
                            <br />
                            <span v-if="!contentValid" class="error-tip">资讯主题不能为空</span>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input type="button" value="提交" @click="updateNews()" />&nbsp;&nbsp;
                            <input type="button" value="重置" @click="updateResetNews()" />&nbsp;&nbsp;
                            <input type="button" value="返回" @click="back()" />
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

    </div>
</template>
<script>
import { mapMutations } from 'vuex'

export default {
    name: 'MemberNewsListRight',
    props: {
        userType: { type: Number, default: 0 },   // 0 普通  1 管理员
        fromAdmin: { type: Boolean, default: false } // true=管理中心入口
    },
    computed: {
        // 决定是否显示资讯增删改
        canEdit() {
            return this.userType === 1 && this.fromAdmin
        },
        // 只显示 5 个页码，当前页尽量居中
        showPages() {
            const { pageNum, pages } = this.pageInfo;
            let start = Math.max(pageNum - 2, 1);
            let end = Math.min(start + 4, pages);
            if (end - start < 4) start = Math.max(end - 4, 1);
            const arr = [];
            for (let i = start; i <= end; i++) arr.push(i);
            return arr;
        }
    },
    data() {
        return {
            // 页面信息
            newsList: [],
            title: '',
            createTime: '',
            pageInfo: {},
            viewMode: 'none',
            newsInfo: {},
            addNewsInfo: {
                title: '',
                content: ''
            },
            updateNewsInfo: {
                id: 0,
                title: '',
                content: ''
            },
            //输入内容是否合法
            titleValid: true,
            contentValid: true
        }
    }
    , methods: {
        ...mapMutations(['setShowPage']),
        // 统一翻页方法
        turn(page) {
            if (page < 1 || page > this.pageInfo.pages) return;
            this.getNewsList(page, this.pageInfo.pageSize);
        },
        // 获取页面
        getNewsList(pageNum, pageSize) {
            this.$axios({
                url: '/selectNewsByPage',
                method: 'post',
                data: {
                    pageNum: pageNum,
                    pageSize: pageSize,
                    title: this.title,
                    createTime: this.createTime
                },
                headers: {
                    'Content-Type': 'application/json'
                }
            }).then(rs => {
                console.log(rs)
                this.pageInfo = rs.data.pageInfo
                this.newsList = rs.data.pageInfo.list
            })
        }
        // 跳页
        , nextPage(rep) {
            let pageNum = 1;
            switch (rep) {
                case "next":
                    pageNum = this.pageInfo.nextPage === 0 ? this.pageInfo.pages : this.pageInfo.nextPage;
                    break;
                case "pre":
                    pageNum = this.pageInfo.prePage === 0 ? 1 : this.pageInfo.prePage;
                    break;
                case "end":
                    pageNum = this.pageInfo.pages;
                    break;
            }
            this.getNewsList(pageNum, 5)
        }
        // 获取具体资讯
        , getNewsById(id) {
            this.initValid()
            this.$axios({
                url: '/selectNewsById',
                method: 'get',
                params: {
                    id: id
                }
            }).then(rs => {
                console.log(rs)
                this.newsInfo = rs.data.newsInfo
                // 另存修改数据
                this.updateNewsInfo.id = rs.data.newsInfo.id
                this.updateNewsInfo.title = rs.data.newsInfo.title
                this.updateNewsInfo.content = rs.data.newsInfo.content
            })
        },
        // 初始化校验信息
        initValid() {
            this.titleValid = true
            this.contentValid = true
        },
        // 失焦校验
        checkTitle() {
            this.titleValid = !!this.addNewsInfo.title.trim();
        },
        checkContent() {
            this.contentValid = !!this.addNewsInfo.content.trim();
        }
        // 获取焦点清除错误信息
        , clearTitleError() {
            this.titleValid = true
        }
        , clearContentError() {
            this.contentValid = true
        }
        // 重置列表查询
        , resetForm() {
            this.title = ''
            this.createTime = ''
            this.getNewsList(1, 5)
        }
        // 显示新增页面
        , addNewsDiv() {
            this.viewMode = 'add'
        }
        // 显示修改页面
        , updateNewsDiv(id) {
            this.viewMode = 'update'
            this.getNewsById(id)
        }
        // 显示详情页面
        , showNewsDiv(id) {
            this.viewMode = 'show'
            this.getNewsById(id)
        }
        // 只显示列表
        , back() {
            this.viewMode = 'none'
        }
        // 重置新增资讯
        , addResetNews() {
            this.addNewsInfo.title = ''
            this.addNewsInfo.content = ''
        }
        // 重置修改资讯
        , updateResetNews() {
            this.updateNewsInfo.title = this.newsInfo.title
            this.updateNewsInfo.content = this.newsInfo.content
        }
        //添加资讯
        , addNews() {
            this.checkTitle()
            this.checkContent()
            if (this.titleValid === false || this.contentValid === false) {
                return
            }
            this.$axios({
                url: "/addNews",
                method: 'post',
                data: {
                    title: this.addNewsInfo.title,
                    content: this.addNewsInfo.content
                }
            }).then(rs => {
                console.log(rs)
                if (rs.data.code === 5200) {
                    this.back()
                    this.getNewsList(1, 5)

                } else {
                    alert(rs.data.msg)
                }
            })
        }
        // 修改资讯
        , updateNews() {
            this.checkTitle()
            this.checkContent()
            if (this.titleValid === false || this.contentValid === false) {
                return
            }
            this.$axios({
                url: "/updateNews",
                method: 'post',
                data: {
                    id: this.updateNewsInfo.id,
                    title: this.updateNewsInfo.title,
                    content: this.updateNewsInfo.content
                }
            }).then(rs => {
                console.log(rs)
                if (rs.data.code === 5200) {
                    this.back()
                    this.getNewsList(1, 5)
                } else {
                    alert(rs.data.msg)
                }
            })
        }, delNews(id) {
            let flag = confirm("确定删除吗？")
            if (flag) {
                this.$axios({
                    url: '/delNews',
                    method: 'get',
                    params: {
                        id: id
                    }
                }).then(rs => {
                    console.log(rs)
                    if (rs.data.code === 5200) {
                        this.getNewsList(1, 5)
                    } else {
                        alert(rs.data.msg)
                    }
                })
            }
        }
    }
    , mounted() {
        this.setShowPage(1)
        this.getNewsList(1, 5)
        const newsId = this.$route.query.id;
        if (newsId) {
            this.showNewsDiv(newsId);
        }
    }
}
</script>

<style scoped>
/* 水平表单 */
.horizontal-form {
    display: flex;
    align-items: center;
    /* 垂直居中 */
    gap: 12px;
    /* 列间距 */
    flex-wrap: wrap;
    /* 小屏自动换行 */
}

.form-item {
    display: flex;
    align-items: center;
    gap: 4px;
    /* label 与 input 间距 */
}

/* 按钮组靠右 */
.buttons {
    margin-left: auto;
}

table {
    width: 90%;
    border-collapse: collapse;
    margin-top: 20px;
    text-align: center;
    border: 1px solid #ddd;
}

th,
td {
    border: 1px solid #ddd;
    /* 内部细线 */
    padding: 6px 10px;
    /* 文字与线之间的空隙 */
}

th:nth-child(1),
td:nth-child(1) {
    width: 60px;
}

/* 序号 */
th:nth-child(2),
td:nth-child(2) {
    width: auto;
}

/* 资讯主题，自适应 */
th:nth-child(3),
td:nth-child(3) {
    width: 150px;
}

/* 发布时间 */
th:nth-child(4),
td:nth-child(4) {
    width: 120px;
}

/* 操作 */

tbody tr:hover {
    background: #f5f5f5;
}

/* 分页居中 */
.pagination {
    text-align: center;
    margin-top: 20px;
}

/* 错误提示 */
input.error,
textarea.error {
    border: 1px solid #ff4e00;
}

.error-tip {
    color: #ff4e00;
    font-size: 12px;
    margin-left: 6px;
}

/* ---------- 分页条 ---------- */
.pagination {
    width: 85%;
    margin: 20px auto;
    display: flex;
    gap: 8px;
    font-size: 14px;
}

.pagination button {
    border: 1px solid #dcdfe6;
    background: #fff;
    color: #606266;
    padding: 4px 10px;
    border-radius: 3px;
    cursor: pointer;
}

.pagination button:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.pagination span {
    border: 1px solid #dcdfe6;
    padding: 4px 8px;
    cursor: pointer;
}

.pagination span.active {
    background: #ff4e00;
    color: #fff;
    border-color: #ff4e00;
}
</style>